<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    h2,
    p {
      margin: 0;
    }

    .box {
      margin: 30px auto;
      width: 300px;
    }

    #user,
    #message {
      box-sizing: border-box;
      width: 300px;
      border: 1px solid #000;
      padding: 10px;
      height: 100px;
      resize: none;
      display: block;
    }

    #user {
      padding: 0 10px;
      height: 30px;
      margin-bottom: 10px;
    }

    #btn {
      display: block;
      margin: 10px auto;
      width: 60%;
      height: 40px;
    }

    #list {
      border-top: 1px solid #000;
      padding: 10px 0 0;
      margin: 0;
      list-style: none;
    }

    #list li {
      position: relative;
      font: 14px/30px "宋体";
      border-bottom: 1px solid #000;
      padding: 0 15px;
      overflow: hidden;
    }

    .clos {
      position: absolute;
      right: 5px;
      top: 10px;
    }

    .clos2 {
      position: absolute;
      right: 5px;
      top: 30px;
    }

    .replay {
      position: absolute;
      right: 5px;
      top: 35px;
    }

    .mask {
      width: 100vw;
      height: 100vh;
      background: black;
      opacity: .3;
      position: absolute;
      left: 0;
      top: 0;
      display: none;
    }

    .comfirm {
      width: 200px;
      height: 120px;
      background: white;
      text-align: center;
      position: absolute;
      left: 50%;
      top: 30%;
      border-radius: 5px;
      transform: translate(-50%, -50%);
      overflow: hidden;
      display: none;

    }

    .comfirm button {
      /* position: absolute; */
      /* right: 10px; */
      float: right;
      margin-top: 20px;
      margin-right: 10px;
    }
  </style>
</head>

<body>
  <div class="box">
    <input type="text" id="user" value="小明" />
    <textarea id="message">我就是传说中的无敌小明</textarea>
    <button id="btn">提交留言</button>
    <ul id="list">
      <!-- <li style="height: auto">
        <h2 class="user">小王说:</h2>
        <p>呼叫无敌小明</p>
        <a href="javascript:;" class="clos">删除</a>
      </li>
      <li style="height: auto">
        <h2 class="user">老师说:</h2>
        <p>滚出去</p>
        <a href="javascript:;" class="clos">删除</a>
      </li> -->
    </ul>


  </div>
  <script>
    // 一、实现一个添加功能；
    // 二、渲染数据
    // 进入页面的时候立刻发送ajax，请求数据库里的内容
    // 写一个函数可以通过ajax获取数据库里最新的数据
    getdata();
    function getdata () {
      let xhr2 = new XMLHttpRequest();
      xhr2.open("get", "/getmessage");
      xhr2.send();
      xhr2.onload = function () {
        if (xhr2.status >= 200 && xhr2.status < 300) {
          let res = JSON.parse(xhr2.responseText);
          if (res.status == 1) {
            renderDom(res.messageData);
          }
        }
      }
    }
    // 定义一个渲染函数，根据数据渲染视图
    function renderDom (data) {
      let ulEle = document.querySelector("#list");
      // 把之前的数据清空掉
      ulEle.innerHTML = "";
      data.forEach(item => {
        let liEle = document.createElement("li");
        liEle.style.height = "auto";
        liEle.innerHTML = `<h2 class="user">${item.username}说:</h2>
                           <p>${item.message}</p>
                           <a 
                           href="javascript:;" 
                           idAttr="${item._id}"
                           class="clos"
                           >删除</a>`;
        // 三、实现删除留言功能
        let delBtn = liEle.querySelector(".clos")
        delBtn.onclick = function () {
          // 点击了删除按钮
          // 1.获取id  2.通过ajax把id传给nodejs 再删除对应id的数据
          let _id = this.getAttribute("idAttr");
          console.log("点击了删除按钮", _id);
          // 通过ajax把id传给nodejs 再删除对应id的数据
          let xhr3 = new XMLHttpRequest();
          xhr3.open("get", `/delmessage?_id=${_id}`);
          xhr3.send();
          xhr3.onload = function () {
            if (xhr3.status >= 200 && xhr3.status < 300) {
              console.log(xhr3.responseText);
              let result = JSON.parse(xhr3.responseText);
              if (result.status == 1) {
                getdata(); // 获取最新的数据库里的信息
              }
            }
          }
        }
        ulEle.appendChild(liEle);
      })
    }

    let addBtn = document.querySelector("#btn");
    let userEle = document.querySelector("#user");
    let messageEle = document.querySelector("#message");
    addBtn.onclick = function () {
      let username = userEle.value;
      let message = messageEle.value;
      // console.log(username,message);
      // 通过ajax 把 username 和message发送到nodejs里 ，通过nodejs操作数据库 在把数据添加到数据库
      let xhr = new XMLHttpRequest();
      // ajax的发送只能在一个服务器间进行 ，如果是不同服务器 那么就会造成 跨域 
      // 一个服务器？ 
      // 同一个服务器需要满足三个条件 ：  协议（http/https）: 域名（localhost 、127.0.0.1、www.baidu.com、www.sohu.com...）: 端口  这三个都要一致 才是一个服务器  
      // ajax发送的页面地址： http://localhost:8989/index
      // ajax请求的地址 ： http://localhost:8989/adduser/test
      xhr.open("get", `/adduser?username=${username}&message=${message}`);
      xhr.send();
      xhr.onload = function () {
        if (xhr.status >= 200 && xhr.status < 300) {
          console.log(xhr.responseText);
          let result = JSON.parse(xhr.responseText);
          if (result.status == 1) {
            // 添加成功
            // 获取最新的数据库里的信息
            getdata();
          }
        }
      }
    }




  </script>
</body>

</html>